$(function () {
    // // 初始化接口所需要的参数
    // let params = {
    //     key: '',        //搜索关键词，可以为空，为空返回某类型所有文章
    //     type: '',       // 文章类型id，可以为空，为空返回所有类型文章
    //     state: '',      //文章状态，草稿 ，已发布,为空返回所有状态文章
    //     page: 1,        //页码
    //     perpage: 10,     //每页显示多少条
    // }
    // // 封装了了获取到的全部文章列表
    // function getList() {
    //     $.ajax({
    //         type: 'get',
    //         url: '/admin/article/query',
    //         // 有五个参数的，只不过都可以为空
    //         data: params,  //参数定义成对象
    //         success: function (backData) {
    //             // console.log(backData);
    //             let htmlStr = template('temp_tr', backData.data)
    //             // console.log(htmlStr);
    //             $('tbody').html(htmlStr)
    //         }
    //     })
    // }
    // getList()

    // // 动态获取类别列表（也就是获取所有文章类别的接口）
    // $.ajax({
    //     type: 'get',
    //     url: '/admin/category/list',
    //     // 参数也是可以为空
    //     // data:{}
    //     success: function (backData) {
    //         console.log(backData);
    //         let htmlStr = template('cata_item', backData)
    //         $('#selCategory').html(htmlStr)
    //     }
    // })

    // // 点击筛选按钮
    // $('#btnSearch').on('click', function (e) {
    //     e.preventDefault()
    //     params.type = $('#selCategory').val()
    //     params.state = $('#selStatus').val()
    //     // 点击筛选的时候重置页码
    //     params.page = 1
    //     getList()
    // })

    // // 分页功能
    // layui.use('laypage', function () {
    //     var laypage = layui.laypage;

    //     //执行一个laypage实例
    //     laypage.render({
    //         elem: 'pager', //注意，这里的 test1 是 ID，不用加 # 号
    //         count: 220,//数据总数，从服务端得到
    //         limit: params.perpage,//每页显示的条数
    //         curr: params.page,// 颜色高亮的页
    //         jump: function (obj, first) {
    //             //obj包含了当前分页的所有参数，比如：
    //             console.log(obj.curr) // 得到当前页，以便向服务端请求对应页的数据。
    //             // console.log(obj) //得到每页显示的条数
    //             // 更新请求的页码参数
    //             params.page = obj.curr
    //             // 首次不执行
    //             if (!first) {
    //                 // 🎃 重新获取列表数据，注意书写位置，否则容易出现死循环
    //                 getList()
    //             }
    //         },
    //     });
    // })

    let params = {
        key: '',    // 搜索关键词，可以为空，为空返回某类型所有文章
        type: '',   // 文章类型id，可以为空，为空返回所有类型文章
        state: '', // 文章状态，草稿 ，已发布,为空返回所有状态文章
        page: 1,   //当前页，为空返回第1页
        perpage: 6, //一页有多少行
    }

    getList()
    function getList() {
        // 获取全部文章显示到页面中
        $.ajax({
            type: 'get',
            url: '/admin/article/query',
            data: params,
            success: function (backData) {
                console.log(backData)
                let htmlStr = template('temp_tr', backData.data)
                $('tbody').html(htmlStr)
                // 调用分页器，生成一个分页器实例显示到页面中
                let totalCount = backData.data.totalCount
                // 分页器里面接收到了这个总条数，要传给分页器函数
                layerPager(totalCount)  //返回的数据中有数据的总条数，backData.data.totalCount
            },
        })
    }

    // 动态获取类别列表
    $.ajax({
        // 类别选择其实也是文章搜索，所以要用到搜索的接口
        type: 'get',
        url: '/admin/category/list',
        // 这里不需要对象
        // data:{},
        success: function (backData) {
            console.log(backData);
            let htmlStr = template('cata_item', backData)
            $('#selCategory').html(htmlStr)
        }
    })

    // 给筛选按钮做点击事件
    $('#btnSearch').on('click', function (e) {
        e.preventDefault()
        // 这里value存的是id
        params.type = $('#selCategory').val()

        params.state = $('#selStatus').val()
        // 点击筛选的时候他的页码可能已经改变，比如说变成了最后一页，这样子他就只能从最后一页开始筛选，拿不到数据，就会出错，为了避免错误，我们要把他的页码改成第一页
        params.page = 1
        // 根据条件重新刷新页面
        getList()
    })


    // 分页
    // 先把分页器封装成一个函数，在上面获取全部文章并渲染到页面的同时也调用分页
    function layerPager(totalCount) {
        layui.use('laypage', function () {
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'pager', //注意，这里的 test1 是 ID，不用加 # 号
                count: totalCount, //数据总数，从服务端得到
                // 让这个页容量和接口的页容量一致
                limit: params.perpage,
                // 这个是让页码的默认数字跟随着点击的改变，点到哪个他就显示哪个
                curr: params.page,


                jump: function(obj, first){
                    //obj包含了当前分页的所有参数，比如：
                    //得到当前页，以便向服务端请求对应页的数据（点击了页码，就可以获取到当前页码的索引）。
                    console.log(obj.curr)
                    // 更新请求的页码参数
                    params.page = obj.curr; 

                    // console.log(obj.limit); //得到每页显示的条数
                    
                    //首次不执行
                    if(!first){
                      //do something
                      // 更新完页码之后再重新调用数据
                      getList()
                    }
                  }
            });
        });
    }

    // 删除文章
    $('tbody').on('click','.btn_delete',function(){
        // console.log(111);
        let id = $(this).attr('data-id')
        console.log(id);
        // 弹出询问框
        layer.confirm('确定删除？',function(index){
            // 关闭询问框
            layer.close(index)
            // 发送ajax请求删除文章
            $.ajax({
                type:'post',
                url:'/admin/article/delete',
                data:{
                    id
                },
                success:function(backData){
                    // console.log(backData);
                    layer.msg(backData.msg)
                    // 重新加载数据
                    getList()   //第一种办法
                    // $(this).parent().parent().remove()  //第二种方法
                },
            })
        })
    })

    $('tbody').on('click','.btn-bianji',function(){
        let id = $(this).attr('href')
        window.location.href = './article_edit.html' + id
    })
})